<template>
  <div class="card">
     <img src="https://picsum.photos/id/404/367/267"/>
     <h3>Lorem ipsum</h3>
     <div class="focus-content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> <a href="#">Link to source</a>
         </p>
     </div>
  </div>
</template>

<script>
export default {
  name: 'ShowDescOnHover'
}
</script>

<style lang="less" scoped>
.card{
    width: 300px;
    height: 280px;
    color: #fff;
    background-color: #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    padding: 0px;
    text-align: left;

    img{
        width: 300px;
        height: 224px;
        object-fit: cover;
        display: block;
        margin: 0;
    }

    h3{
        margin: 0;
        padding: 12px 12px 48px;
        line-height: 32px;
        font-weight: 500;
        font-size: 20px;
    }
    .focus-content{
          display: block;
          padding: 8px 12px;
    }
    p {
        margin: 0;
        line-height: 1.5;
    }
    &:hover{
        // img, .card:focus-within img {
        //     margin-top: -80px;
        // }

        // h3, .card:focus-within h3 {
        //     padding: 8px 12px 0;
        // }
        // 上面效果等同下面效果
        img {
            margin-top: -80px;
        }
         h3 {
            padding: 8px 12px 0;
        }
    }
}
.card *{
        transition: 0.3s ease all;
    }
</style>
